<script setup lang="ts">
import { ref } from "vue";
import { getAllUserCard, getName, update } from "../../utils/topup";
import moment from "moment";
import { sortUserPlugins } from "vite";

// 用于存储所有卡片信息
const cardAll = ref([]);
const radio1 = ref(""); // 用于选择卡片类型
const dialogFormVisible = ref(false); // 控制对话框显示
const cardids = ref<number | null>(null); // 用于保存选中的卡片ID

// 获取所有卡片信息
const getAll = async () => {
  cardAll.value = await getAllUserCard();
  console.log(cardAll.value);

  // 使用 Promise.all 来并行处理异步操作
  await Promise.all(
    cardAll.value.map(async (element) => {
      element.Username = await getnamea(element.UserId);
      console.log(element.MaturityTime);

      // 格式化时间（用于展示）
      element.MaturityTimeFormatted = moment(element.MaturityTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      element.ParchTimeFormatted = moment(element.ParchTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );

      // 当前时间
      const currentTime = moment();

      // 判断是否过期
      if (moment(element.MaturityTime).isBefore(currentTime)) {
        element.status = "已过期";
      } else {
        element.status = "未过期";
      }

      // 计算卡片有效期与购买时间的差值
      const timeDifference = moment(element.MaturityTime).diff(
        moment(element.ParchTime)
      );

      // 根据时间差判断卡片类型
      if (timeDifference < 7 * 24 * 60 * 60 * 1000) {
        element.card = "周卡";
      } else if (timeDifference < 30 * 24 * 60 * 60 * 1000) {
        element.card = "月卡";
      } else if (timeDifference < 90 * 24 * 60 * 60 * 1000) {
        element.card = "季卡";
      } else {
        element.card = "年卡";
      }
    })
  );
};

// 获取用户名
const getnamea = async (id: number) => {
  const res = await getName(id);
  return res;
};

// 处理充值操作
const a = (id: number) => {
  try {
    dialogFormVisible.value = true;

    // 遍历 cardAll 来找到对应的卡片
    for (const item of cardAll.value) {
      if (id === item.cardId) {
        cardids.value = item.cardId; // 保存选中的卡片ID
        if (item.status === "未过期") {
          // 如果是未过期的卡片
          console.log(item.cardId);
        } else if (item.status === "已过期") {
          let a = new Date();
          // 如果是已过期的卡片
          console.log(id);
        }
      }
    }
  } catch (error) {
    console.error("更新失败", error);
  }
};

// 更新卡片信息
const updatetime = async () => {
  dialogFormVisible.value = false;

  // 找到当前的 cardId 对应的项
  const item = cardAll.value.find((item) => item.cardId === cardids.value);

  if (item) {
    // 更新过期卡片的购买时间
    if (radio1.value === "zhouka") {
      item.blance = item.blance - 10;
    } else if (radio1.value === "yueka") {
      item.blance = item.blance - 30;
    } else if (radio1.value === "jika") {
      item.blance = item.blance - 80;
    } else if (radio1.value === "nianka") {
      item.blance = item.blance - 188;
    }
    if (item.status === "未过期") {
      await update(item); // 调用更新函数
    } else if (item.status === "已过期") {
      // 假设给余额设置新的值
      // let str = moment(new Date()).format("YYYY-MM-DD[T]HH:mm:ss");
      // item.ParchTime = "2010-04-11T18:27:53"; // 赋值给 ParchTime

      // 进行更新
      console.log("asdasdasd" + item.blance);
      if (item.blance < 0) {
        console.log("余额不足");

        getAll();
        return;
      } else {
        await update(item);
        getAll();
      }
    }
  }
};

// 页面加载时获取所有卡片信息
getAll();
</script>

<template>
  <el-card>
    <div>充值</div>
    <hr />
    <el-card>
      <el-table :data="cardAll">
        <el-table-column prop="cardId" label="ID" />
        <el-table-column prop="Username" label="会员" />
        <el-table-column prop="card" label="充值卡" />
        <el-table-column prop="blance" label="金额" />
        <el-table-column prop="ParchTimeFormatted" label="会员购买时间" />
        <el-table-column prop="MaturityTimeFormatted" label="会员到期时间" />
        <el-table-column prop="status" label="状态" />
        <el-table-column prop="Description" label="操作">
          <template v-slot="scope">
            <el-button type="primary" class="cz" @click="a(scope.row.cardId)">
              充值
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="充值会员" width="700" v-model="dialogFormVisible">
      <el-form>
        <el-radio-group
          v-model="radio1"
          size="large"
          style="display: flex; flex-direction: column; align-items: center"
        >
          <div style="flex: 0.5; display: flex; margin-bottom: 20px">
            <el-radio-button
              label="$10/周卡"
              value="zhouka"
              style="margin-right: 20px"
            />
            <el-radio-button label="$30/月卡" value="yueka" style="flex: 1" />
          </div>
          <div style="flex: 0.5; display: flex">
            <el-radio-button
              label="$80/季卡"
              value="jika"
              style="margin-right: 20px"
            />
            <el-radio-button label="$188/年卡" value="nianka" />
          </div>
        </el-radio-group>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="updatetime()"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
</template>

<style scoped>
.cz {
  border-radius: 30px;
}
* {
  margin: 0px;
}
</style>
